<template>
  <div class="app-container">
    <div class="son" ref="show1"> </div>
    <div class="son">
      <div class="son1" ref="show2"></div>
      <div class="son1" ref="show3"></div>
    </div>
  </div>
</template>

<script>
import { getWeekSell } from "@/api/system/order"
import { getWeekPurchase } from "@/api/system/purchase"
import { listMinNum, getTypeNum } from "@/api/system/goods"
import * as echarts from 'echarts'

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.6",
      priceList: {},
      priceList2: {},
      goodsList: {},  // 商品数量列表
      typeList: [] // 分类列表
    };
  },
  created() {
    this.setList();
    this.getSellPurceList();  // 绘制折线图（进价、售价）
    this.gettpNum();    // 绘制饼状图（商品类别）
  },
  methods: {
    gettpNum() {
      getTypeNum().then(
        (resp) => {
          var data =resp.data;
          for (const typeName in data) {
            this.typeList.push({
              "value": data[typeName],
              "name": typeName
            })
          }
          this.show3();
        }
      )
    },
    setList() {
      var currentDate = new Date();
      currentDate.setDate(currentDate.getDate() - 6);
      for (var i = 0; i < 7; i++) {
        this.priceList[this.changeTime(currentDate)] = 0;
        this.priceList2[this.changeTime(currentDate)] = 0;
        currentDate.setDate(currentDate.getDate() + 1);
      }
    },
    show3() {
      var option = {
        title: {
          text: '商品分类图',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '商品分类图',
            type: 'pie',
            radius: '50%',
            data: this.typeList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      var dom3 = this.$refs.show3;
      echarts.init(dom3).setOption(option);
    },
    show2() {
      var dic3 = this.goodsList;
      var chartData2 = {
        title: {
          text: "库存告急图",
          left: "center"
        },
        xAxis: {
          type: 'category',
          data: Object.keys(dic3)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            label: {
              show: true,
              position: "top"
            },
            data: Object.values(dic3),
            type: 'bar'
          }
        ]
      };
      var dom2 = this.$refs.show2;
      var ec2 = echarts.init(dom2);
      ec2.setOption(chartData2)
    },
    show1() {
      var dic = this.priceList;
      var dic2 = this.priceList2;
      var chartData = {
        title: {
          text: "近一周销售情况",
          left: "center"
        },
        // 这里是 ECharts 的配置项
        xAxis: {
          type: 'category',
          data: Object.keys(dic)
        },
        yAxis: {
          type: 'value'
        },
        legend: { data: ["售价", "进价"], left: "left" },
        series: [
          {
            name: "售价",
            label: {
              show: true,
              position: "top"
            },
            data: Object.values(dic),
            type: 'line',
            smooth: true
          },
          {
            name: "进价",
            label: {
              show: true,
              position: "top"
            },
            data: Object.values(dic2),
            type: 'line',
            smooth: true
          }
        ]
      }
      var dom = this.$refs.show1;
      var ec = echarts.init(dom);
      ec.setOption(chartData);
    },
    changeTime(date) {
      var year = date.getFullYear();
      var month = (1 + date.getMonth()).toString().padStart(2, '0');
      var day = date.getDate().toString().padStart(2, '0');
      var formattedDate = year + '-' + month + '-' + day;
      return formattedDate;
    },
    getSellPurceList() {
      getWeekSell().then(
        (resp) => {
          const data = resp.data;
          for (var i = 0; i < data.length; i++) {
            this.priceList[
              this.changeTime(new Date(data[i].time))
            ] = data[i].price;
          }
        }
      ).then(
        getWeekPurchase().then(
          (resp) => {
            const data = resp.data;
            for (var i = 0; i < data.length; i++) {
              this.priceList2[
                this.changeTime(new Date(data[i].time))
              ] = data[i].price;
            }
            this.show1();
          }
        )
      )

      listMinNum().then(
        (resp) => {
          var data = resp.data;
          for (var i = 0; i < data.length; i++) {
            this.goodsList[data[i].goodName] = data[i].num;
          }
          this.show2();
        }
      )
    },
    goTarget(href) {
      window.open(href, "_blank");
    }
  }
};
</script>

<style scoped lang="scss">
.son {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 300px;
}

.son:nth-child(2) {
  margin-top: 20px;
  height: 380px;
  display: flex;
  flex-direction: row;
}

.son1 {
  width: 50%;
  height: 100%;
}

.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans",
  "Helvetica Neue",
  Helvetica,
  Arial,
  sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

